<template>
    <h3>监听器</h3>
    <!-- 监听器可以监听hello改为为“你好”的这个过程 -->
    <p>{{ message }}</p>
    <button @click="changeMessage">点我修改</button>
</template>

<script>
    export default{
        data(){
            return {
                message:"hello"
            }
        },
        methods:{
            changeMessage(){
                this.message = "你好"
            }
        },
        watch:{
            //newValue:新值 改变之后的数据
            //  oldValue:旧值 改变之前数据
            //监听message属性的变化 所以监听器里的函数名message名字要和被监听的对象属性名一致
            message(newValue,oldValue){
                //
                console.log("newValue:"+newValue+" oldValue:"+oldValue)
            }
        }
    }
</script>